<!--注册页
bg-blue-200

-->
<template>
  <div class="flex flex-col h-screen">

    <div class="hero bg-base-200 w-full h-full">
      <div class="hero-content flex-row w-full ">

        <div class="text-left w-64 shrink-0">
          <h1 class="text-3xl font-bold">{{ title }}</h1>
          <p class="py-6 text-gray-500">
            {{ description }}
          </p>
        </div>


        <!--注册区域-->
        <div class=" card bg-base-100  max-w-md shrink-0 shadow-2xl h-full w-full ">
          <ul class="steps flex-shrink-0 w-full my-4">
            <li class="step " :class="{ 'step-primary': stepIsActive(0) }">Register</li>
            <li class="step " :class="{ 'step-primary': stepIsActive(1) }">Password</li>
            <li class="step " :class="{ 'step-primary': stepIsActive(2) }">Fnished</li>
          </ul>

          <!--注册表单-->
          <div class="card flex-shrink-0 h-full w-full shadow-2xl bg-base-100 ">
            <div v-if="stepIsActive(0)" class="card-body ">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Your username</span>
                </label>
                <input type="text" v-model="username" placeholder="username" class="input input-bordered"/>
              </div>

              <div class="form-control">
                <label class="label">
                  <span class="label-text">Your phone or email</span>
                </label>
                <input type="text" v-model="contact" placeholder="phone / email" class="input input-bordered"/>
              </div>

              <div class="form-control mt-6">
                <button for="my-modal" class="btn btn-primary" @click="toSendCode()">发送验证码</button>
              </div>
            </div>

            <div v-if="stepIsActive(1)" class="card-body">
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Your Password</span>
                </label>
                <input type="text" v-model="password" placeholder="password" class="input input-bordered"
                       required/>
              </div>
              <div class="form-control">
                <label class="label">
                  <span class="label-text">Again your Password</span>
                </label>
                <input type="text" v-model="rePassword" placeholder="confirm password"
                       class="input input-bordered" required/>
              </div>

              <div class="form-control">
                <label class="label block"><span class="label-text">验证码</span></label>
                <div class="flex items-center">
                  <input class="input input-bordered w-1/2 block" type="text" v-model="verifyCode" placeholder="code"
                         required/>
                  <a class="link link-neutral w-1/2 text-gray-500 pl-8"
                     @click="toSendCode(true)">
                    点击重新发送
                    <span v-if="isClickedCode">({{ counting }}s)</span>
                  </a>
                </div>
              </div>
              <div class="form-control mt-6">
                <button class="btn btn-primary" @click.prevent="toSubmit()">确认提交</button>
                <button class="btn btn-ghost" @click.prevent="reset()">Reset</button>
              </div>
            </div>

            <div v-if="stepIsActive(2)" class="card-body h-80">
              <div class="text-lg">恭喜您注册成为我们的正式用户</div>
              <div>
                您的登录账号：<span>{{username}}</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="h-12 flex flex-row px-4 ">
      <button class=" btn btn-link btn-info" @click="toLogin()">返回登录</button>
      <button class="ml-auto btn btn-link btn-info" @click="()=>{}">简体中文</button>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {useUserStore} from '@/stores/user.ts'
import LoginApi from "@/api/login_mock.js";
import 'element-plus/es/components/message/style/css';
import {ElMessage} from 'element-plus'

const userStore = useUserStore()
const router = useRouter()

const title = "Register now!"
const description = "Welcome to register as a formal user. Please fill in your relevant information."


/*
 * 弹框相关
 */
const dialogVisible = ref(false)
//打开弹框
const clickOpen = () => {
  dialogVisible.value = true
}
//关闭弹框
const handleClose = () => {
  dialogVisible.value = false
}

/**
 * 注册相关
 */
const verifyCode = ref("")
const username = ref("")
const contact = ref("")
const password = ref("")
const rePassword = ref("")
const isClickedCode = ref(false)
//重发code的倒计时
const counting = ref(0)

//发送验证码
const toSendCode = async (isRetry = false) => {
  if (!username.value) {
    ElMessage.warning("username 不能为空")
    return
  }
  if (!contact.value) {
    ElMessage.warning("phone or email 不能为空")
    return
  }

  if (isClickedCode.value) {
    ElMessage.warning("已经在发送了，不要心急")
    return
  }

  let resp = await LoginApi.sendSmsCode(contact);
  let uuid = resp.data;
  sessionStorage.setItem('X-uuid', uuid)

  ElMessage.info("验证码已发送,请注意查收")
  if (!isRetry) {
    toNext()
  } else {

    isClickedCode.value = true

    const timer = setInterval(function () {
      counting.value--
      if (counting.value <= 0) {
        isClickedCode.value = false
      }
    }, 1000);
    setTimeout(() => {
      window.clearInterval(timer)
    }, counting.value * 1000)
  }
}

const toSubmit = async () => {
  // console.log("发送注册接口....")

  const resp = await userStore.register(username.value, password.value, contact.value, verifyCode.value)
  if (resp.ok) {
    toNext()
  } else {
    ElMessage.error(resp.msg)
  }

}


/**
 * 流程 step 相关
 */
const stepActive = ref(0)

const stepIsActive = (index) => {
  return stepActive.value === index
}
const toNext = () => {
  if (stepActive.value < 2)

    stepActive.value++
}

/**
 * 路由到登录页
 */
const toLogin = () => {
  //url?传参，用$route.query.name取值
  router?.replace({path: '/login'})
}


const reset = () => {
  stepActive.value = 0
  verifyCode.value = ""
  username.value = ""
  contact.value = ""
  password.value = ""
  rePassword.value = ""
  counting.value = 60
  isClickedCode.value = false
}
reset()
</script>

<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

</style>